<template>
  <div class="warpper-box">
    <div class="inner_box">
      <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
        <el-form-item
          label="关于我们"
          prop="content"
          :rules="[
            { required: true, message: '请输入关于我们信息', trigger: 'blur' }
          ]"
        >
          <quill-editor
            style="display: inline-block;width: 100%;height: 400px;"
            v-model="ruleForm.content"
            :options="editorOption"
            ref="myQuillEditor"
          ></quill-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getWebSystemAbout, webSystemAboutSave } from "@/api/about_api";
import { toolbarOptions, handlers } from "@/utils/index";
export default {
  name: "webAbout",
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: handlers
          }
        },
        theme: "snow"
      },
      ruleForm: { content: "" }
    };
  },
  mounted() {
    this.getAbout();
  },
  methods: {
    async getAbout() {
      const { code, data } = await getWebSystemAbout(1);
      if (code === 200) {
        this.ruleForm.content = data.content;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let params = {};
          params.id = 1;
          params.content = this.ruleForm.content;
          const { code } = await webSystemAboutSave(params);
          if (code === 200) {
            this.$message.success("操作成功");
            this.getAbout();
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
